<%@ include file="../common/top.jsp" %>
<style>
    .notExistTips {
        color: green;
    }

    .errorTips {
        color: red;
    }
</style>
<script>
    let xhr;

    function checkUsername() {
        const username = document.getElementById("username").value;
        xhr = new XMLHttpRequest();
        xhr.onreadystatechange = fun1;
        xhr.open("GET", "usernameExist?username=" + username, true);
        xhr.send(null);
    }

    function fun1() {
        let responseInfo = xhr.responseText;
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                const tips = document.getElementById("userTips");
                /*responseInfo = xhr.responseText;*/
                if (responseInfo === "Exist") {
                    /*tips.classList.add('errorTips')*/
                    tips.className = "errorTips"
                    tips.innerText = "Invalid";
                } else if (responseInfo === "Not Exist") {
                    /*tips.classList.add('notExistTips')*/
                    tips.className = "notExistTips"
                    tips.innerText = "Available";
                } else if (responseInfo === "null") {
                    tips.innerText = "";
                }
            }
        }
    }
</script>

<div id="Catalog"><%--<stripes:form
	beanclass="org.mybatis.jpetstore.web.actions.AccountActionBean"
	focus="">--%>
    <form action="newAccount" method="post">
        <h3>User Information</h3>

        <table>
            <tr>
                <td>User ID:</td>
                <td><%--<stripes:text name="username" />--%>
                    <input type="text" name="username" id="username" onblur="checkUsername();"><br>
                    <span id="userTips"> </span>
                </td>
            </tr>
            <tr>
                <td>New password:</td>
                <td><%--<stripes:text name="password" />--%>
                    <input type="password" name="password">
                </td>
            </tr>
            <tr>
                <td>Repeat password:</td>
                <td><%--<stripes:text name="repeatedPassword" />--%>
                    <input type="password" name="repeatedPassword">
                </td>
            </tr>
            <tr>
                <script type="text/javascript">
                    function myReload() {
                        document.getElementById("CreateCheckCode").src = document
                            .getElementById("CreateCheckCode").src + "?nocache=" + new Date().getTime();
                    }
                </script>
                <td style="vertical-align: middle">Verification code:</td>
                <td>
                    <input name="checkCode" type="text" id="checkCode"
                           title="The verification code is not case sensitive."
                           size="10" maxlength="8"/>
                    <a onclick="myReload()"><img src="PictureCheckCode" id="CreateCheckCode" align="middle"></a>
                </td>
            </tr>
        </table>
        <p style="color:red;">${sessionScope.message}</p>

        <%@ include file="accountFields.jsp" %>

        <%--<stripes:submit name="newAccount" value="Save Account Information" />--%>
        <input type="submit" value="Save Account Information">
    </form>
    <%--</stripes:form>--%>
</div>

<%@ include file="../common/bottom.jsp" %>
